Day 3 : 改頭換面，用 JSX 重寫畫面

2026 iThome 鐵人賽

DAY 3

自我挑戰組

React 入門到實作與除錯｜30 天哩ㄟ刻系列第 3 篇

18th鐵人賽

hankyang9811

2026-09-17 23:40:14

41 瀏覽

分享至

最好的計劃就是，聽客戶的話

今天目標

認識 JSX
替換掉目前的首頁
建立變數，動態調整內容
樣式調整

認識 JSX

等等，原本不是 TSX 嗎，怎麼突然變 JSX？
這裡就來認識兩個是什麼關係。

我們寫過這兩個元件

function LearningNote() {
  return <p>今天開始認識 React 元件。</p>;
}

function MyButton() {
  return <button
    className="cursor-pointer bg-blue-500 px-3 py-1 text-white"
    type="button"
  >
    按鈕來了
  </button>;
}

知道了元件就是由函數包住後回傳要顯示的內容，而其中 JSX 就是 JavaScript 語法擴充，讓 JavaScript 可以使用 XML，
TSX 就是用 TypeScript 來寫，差別是 TypeScript 提供更嚴格的型別檢查與自動完成等相關功能，
而 React 就是利用這樣的方便性來建立函式庫提供給開發者運用。

替換掉目前的首頁

現在認識 JSX，可以來試著換掉首頁的內容，從昨天觀察專案結構中知道主要的內容在 home 和 welcome，讓我們來準備一個 HTML 草稿來替換。

<main>
  <h1>我的 React 學習卡片</h1>
  <p>今天練習 JSX<br>先讓畫面長出來。</p>
  <hr>
  <p>目前進度：第 3 天 / 共 30 天</p>
  <p>接下來還有 27 天</p>
  <button 
      class="cursor-pointer bg-blue-500 px-3 py-1 text-white" type="button">
    按鈕來了
  </button>
</main>

因為已經知道外層有提供 <html>、<body> 這類型的 tag，就可以省掉不寫，這也是元件畫的好處之一呢。

重點畫筆記

三個基本規則

規則	範例
多個並排的 JSX 標籤，要組成同一個回傳值	用外層 `<main>...</main>` 包住內容
標籤要明確關閉	`<br>` 改成 `<br />`，`<hr>` 改成 `<hr />`
部分屬性名稱和 HTML 不同	`class` 改成 `className`

但有些情況會需要只變更內容，而不想套上一個外層標籤，例如 <main>，這個時候可以用 <> ... </>，包住內容，就會是 Fragment 用法。

例如：

function LearningNote() {
  return (
    <>
      <h2>今天的天氣</h2>
      <p>是大隕石降落的好日子</p>
    </>
  );
}

把 HTML 改成 JSX

現在基本的東西準備好了，要注意的是按鈕我們要用元件的方式做。
組裝起來就會是：

export function Welcome() {
  return (
    <main>
      <h1>我的 React 學習卡片</h1>
      <p>
        今天練習 JSX<br /> {/* 原本的<br>變成<br/> */}
        先讓畫面長出來。
      </p>
      <hr />
      <p>目前進度：第 3 天 / 共 30 天</p>
      <p>接下來還有 27 天</p>
      <MyButton /> {/* <button>改成元件<MyButton /> */}
    </main>
  );
}

function MyButton() {
  return (
    <button
      className="cursor-pointer bg-blue-500 px-3 py-1 text-white"
      type="button"
    >
      按鈕來了
    </button>
  );
}

現在把這段替換掉原本的段落，就可以來測試效果囉。

建立變數，動態調整內容

現在第幾天、總共幾天、還剩幾天，都是寫死在 JSX 裡。

如果改成第 4 天，卻忘了把剩餘天數改成 26，畫面就會前後對不起來。來把數字交給程式計算。

在 Welcome 的函式內、return 前面加入：

const topic = "JSX";
const day = 3;
const totalDays = 30;

const 宣告這次要讀取的資料。接著把文字中的 JSX 換成 {topic}，進度改成：

<p>目前進度：第 {day} 天 / 共 {totalDays} 天</p>
<p>接下來還有 {totalDays - day} 天</p>

JSX 裡的大括號可以放 JavaScript 運算式，像是讀取變數或計算 totalDays - day。變數先在 return 上方宣告，再放進畫面。React：JavaScript in JSX with Curly Braces

現在替換掉原本的文字內容，整個 Welcome 就變成：

export function Welcome() {
  const topic = "JSX";
  const day = 3;
  const totalDays = 30;

  return (
    <main>
      <h1>我的 React 學習卡片</h1>
      <p>
        今天練習 {topic}<br />
        先讓畫面長出來。
      </p>
      <hr />
        <h2>學習進度</h2>
        <p>目前進度：第 {day} 天 / 共 {totalDays} 天</p>
        <p>接下來還有 {totalDays - day} 天</p>
      <MyButton />
    </main>
  );
}

function MyButton() {
  return (
    <button
      className="cursor-pointer bg-blue-500 px-3 py-1 text-white"
      type="button"
    >
      按鈕來了
    </button>
  );
}

樣式調整

現在畫面還需要美化，我們可以用模板預設提供的 Tailwind CSS 修改樣式。

export function Welcome() {
  const topic = "JSX";
  const day = 4;
  const totalDays = 30;
  const remainingDays = totalDays - day; // 把計算式提出來

  return (
    <main className="min-h-screen bg-gray-100 px-6 py-10 text-gray-900">
      <section className="mx-auto max-w-xl space-y-4 rounded-xl bg-white p-6 shadow">
        <h1 className="text-2xl font-bold">我的 React 學習卡片</h1>
        <p className="text-gray-600">
          今天練習 {topic}
          <br />
          先讓畫面長出來。
        </p>
        <hr className="border-gray-200" />
        <h2 className="font-bold text-blue-800">學習進度</h2>
          <p className="mt-2">
            目前進度：第 {day} 天 / 共 {totalDays} 天
          </p>
          <p>接下來還有 {remainingDays} 天</p>
        <MyButton />
      </section>
    </main>
  );
}

function MyButton() {
  return (
    <button
      className="cursor-pointer rounded bg-blue-500 px-3 py-2 text-white hover:bg-blue-600"
      type="button"
    >
      按鈕來了
    </button>
  );
}

主要是改成了白色背景以及卡片式置中的設計，讓改變的效果明顯一點。

類別	效果
`min-h-screen`、`bg-gray-100`	淺灰色背景且鋪滿整個畫面
`mx-auto`、`max-w-xl`	限制內容寬度並水平置中
`px-6`、`py-10`、`mt-2`	加入外距、元素間距與內距
`rounded-xl`、`bg-white`、`shadow`	加上圓角、白底與陰影
`text-2xl`、`font-bold`、`text-gray-600`	調整文字大小、粗細與顏色
`bg-blue-50`、`text-blue-800`	讓學習進度區塊使用淺藍底與深藍文字
`hover:bg-blue-600`	滑鼠移到按鈕時加深背景色